
/**
 * 子弹时间.
 * 该场景由原来的 Filter (v0.1) 拆分而来
 */

addModule({
	name: "Bullet Time",
	
	config : {
		// 各个单位出现的位置
		posxys: null,

		// 播放时长, 毫秒
		duration: 6000,
	},
	
	temp : {
		/*
		 * 每个元素:
		 * {
		 * 	phase: Integer, 相位数, 等同于 count
		 * 	lastv: Integer, 上一个值
		 * 	cycle: Integer, 周期值
		 * 	type: Integer, 严重程度: 这里是 1(严重) 2(中等) 3(轻微)
		 * }
		 */
		line: [],

		/*
		 *
		 */
		stage1Fin: 0,
	},

	graphic: {
		opt: null,

		circles: [],

		// 背景框
		boxs: [],
	},
	
	require : [
		{
			"name" : "run",
		    "type" : "path"
		}
	],
	
	/**
	 * 本模块的初始化函数
	 */
	init : function() {
		// 调用: 将分镜 (子场景入口函数) 全部加到场景列表中去
		addSceneFunc("BulletTime-1", this.stage1, this.name, null);
		addSceneFunc("BulletTime-2", this.stage2, this.name, null);
		addSceneFunc("BulletTime-3", this.stage3, this.name, null);
		
		// 初始化单位刚出现时的位置
		this.initPosition();
	},

	/**
	 * 初始化单位出现的位置
	 */
	initPosition : function() {
		var needInit = false;
		if (this.config.posxys == null || typeof this.config.posxys != 'array') {
			needInit = true;
		}

		if (!needInit) {
			return;
		}

		var posxy1 = [
			Math.random() * 200 - 100 + _width / 2,
			Math.random() * 200 - 100 + _height / 2
		];
		var posxy2 = [
			Math.random() * 200 - 100 + _width / 2 - 200,
			Math.random() * 200 - 100 + _height / 2 - 200
		];
		/*var posxy3 = [
			Math.random() * 200 - 100 + _width / 2 + 200,
			Math.random() * 200 - 100 + _height / 2 + 200
		];*/
		this.config.posxys = [posxy1, posxy2/*, posxy3*/];

		this.temp.linesValues = [];
	},

	/**
	 * 初始化折线图产生的数据
	 * @param return
	 *   下一个数据
	 */
	nextLinesValue : function(idx) {
		var vs = this.temp.line[idx];
		if (vs == null) {
			vs = this.temp.line[idx] = {
				phase: 0,
				lastv: 5,
				cycle: 5,
				type: 1, // TODO
			}
		}

		var lastv = vs.lastv;
		var cycle = vs.cycle;
		var type = vs.type;
		var v = lastv;

		switch(type) {
		case 1:
			if (lastv > 80) {
				v = lastv - Math.random() * 30 + 10;
				cycle = 0;
			} else if (lastv > 60) {
				v = lastv - Math.random() * 16 + 6;
			} else if (lastv < 10) {
				v = lastv - Math.random() * 16 + 10;
			} else {
				v = lastv + Math.random() * 32 - 16;
			}
			if (cycle > 30) {
				v += Math.random() * (cycle - 15) * 2;
			} else if (cycle < 5) {
				v -= Math.random() * (10 - cycle) * 2;
			}
			if (v < 10) {
				v = 5 + Math.random() * 10;
			} else if (v > 100) {
				v = 100;
			}
			break;
		case 2:
			if (lastv > 30) {
				v = lastv - Math.random() * 15 + 5;
				cycle = 0;
			} else {
				v = lastv + Math.random() * 15 - 7.5;
			}
			if (cycle > 50) {
				v += Math.random() * (cycle - 45);
			}
			if (v < 5) {
				v = 3 + Math.random() * 4;
			} else if (v > 100) {
				v = 100;
			}
			break;
		case 3:
			if (lastv > 10) {
				v = lastv - Math.random() * 5 + 1;
			} else {
				v = lastv + Math.random() * 5 - 2.5;
			}
			if (v < 1) {
				v = 0.5 + Math.random();
			}
			break;
		}
		cycle++;

		vs.phase++;
		vs.lastv = v;
		vs.cycle = cycle;

		return v;
	},

	/**
	 * ECharts 的 option 新加一个折现域
	 */
	pushOption : function(idx) {
		var opt = this.graphic.opt;
		if (opt == null) {
			this.graphic.opt = opt = {
				dataZoom: {
					show: false,
					start: 0,
					end: 100
				},
				xAxis: [],
				yAxis: [],
				series: [],
				grid: [],
				visualMap: {
					show : false,
					pieces: [{
						 lte: 20,
						 color: '#096'
					}, {
						 gt: 20,
						 lte: 45,
						 color: '#ffde33'
					}, {
						 gt: 45,
						 lte: 70,
						 color: '#ff9933'
					}, {
						 gt: 70,
						 color: '#cc0033'
					}],
					outOfRange: {
						 color: '#999'
					}
			  },
			}
		}

		// 添加域
		opt.xAxis.push({
			gridIndex: idx,
			show: true,
			boundaryGap: false,
			data: (function (){
				var res = [];
				var len = 100;
				while (len--) {
					res.push(len + 1);
				}
				return res;
			})(),
			axisLine:{
				// 左端无箭头, 右端显示箭头
				symbol: ['none', 'arrow']
			},
			axisTick: {
				// 不显示刻度点
				show: false
			},
			axisLabel: {
				// 不显示刻度数值
				show: false
			},
			axisPointer: {
				show: false
			}
		});
		opt.yAxis.push({
			gridIndex: idx,
			show: false,
			min: 0,
			max: 100,
		});

		var module = this;
		opt.series.push({
			name: 'line-' + idx,
			type: 'line',
			xAxisIndex: idx,
			yAxisIndex: idx,
			smooth: false,
			symbol: 'none',
			data:(function (){
				var res = [];
				var idx0 = 0;
				while (idx0 < 99) {
					res.push(-1);
					idx0++;
				}
				var d = module.nextLinesValue(idx);
				return res;
			})(),
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(255,20,20,0.6)'
					}, {
						offset: 1,
						color: 'rgba(240,240,20,0.3)'
					}])
				}
			},
			zlevel: 1009
		});

		var x = this.config.posxys[idx][0];
		var y = this.config.posxys[idx][1];
		opt.grid.push(
			{x: x + 20, y: y - 120, width: 290, height: 90, zlevel:1009, z:2}
		);
		
		return opt;
	},

	stage1 : function() {
		if (this.require[0].data != null) {
			console.log("获取资源数据: ");
			console.log(this.require[0].data);
		} else {
			console.error("没有获取到资源!");
		}
		
		
		var posxys = this.config.posxys;
		var clen = posxys.length;
		this.temp.stage1Fin = clen;

		for (var i = 0; i < clen; i++) {
			addRenderFunc("s1_createUnit" + i, this.createUnit, {
				once: true,
				delay: 500 * Math.random(),
			}, i);
		}

		zr.configLayer(0, {
			motionBlur: true,
			lastFrameAlpha: 0.8,
		});
	},

	/*
	 * 让单位 (小球) 产生的方法
	 */
	createUnit : function(idx) {
		var posxy = this.config.posxys[idx];

		var circle = new echarts.graphic.Circle({
			position: posxy,
			scale: [1, 1],
			shape: {
				cx: 0,
				cy: 0,
				r: 15
			},
			style: {
				fill: '#D5339D'
			},
			zlevel: 0
		});

		var box = new echarts.graphic.Polygon({
			position: [posxy[0] + 60, posxy[1] - 20],
			shape: {
				points: [[0, 0], [0, -100], [300, -100], [300, 0]],
				smooth: 0.1
			},
			style: {
				opacity: 0,
				fill: '#555555'
			},
			zlevel: 0
		});

		this.graphic.circles.push(circle);
		this.graphic.boxs.push(box);
		var module = this;

		circle.animate('', false)
			.when(1000, {
				position: [posxy[0] + 40, posxy[1]]
			})
			.start('cubicOut');

		// box.style 里面的 opacity 从 0 到 1 秒后的 0.5 ...
		box.animate('style', false)
			.delay(800)
			.when(1000, {
				opacity: 0.6,
				fill: '#B4E6DC'
			}).start('cubicOut').done(function(){
				// 调用: 出现折线图
				module.temp.stage1Fin--;
				if (module.temp.stage1Fin == 0) {
					endScene();
				}
			});

		zr.add(circle);
		zr.add(box);
	},

	stage2 : function() {
		var clen = this.config.posxys.length;
		for (var i = 0; i < clen; i++) {
			this.lineAppear(i);
		}

		myChart.setOption(this.graphic.opt);

		addRenderFunc("lineAppear-end", function (){
			endScene();
		}, {
			once : true,
			delay : this.config.duration,
		});
	},

	/*
	 * 出现频率折线图
	 */
	lineAppear : function(idx) {
		var x = this.config.posxys[idx][0];
		var y = this.config.posxys[idx][1];

		// 动态模糊不要了
		zr.configLayer(0, {
			motionBlur: false
		});

		var dlen = 500;
		var data = this.temp.linesValues[idx] = this.nextLinesValue(1, dlen);
		
		var opt = this.pushOption(idx);
		var count = 0;
		var phase = 100;
		var module = this;

		addRenderFunc("lineAppear-" + idx, function (){
			count++;

			var odata = opt.series[idx].data;

			odata.shift();
			phase+=2;
			odata.push(module.nextLinesValue(idx));

			myChart.setOption(opt);
		});
	},

	stage3 : function() {
		var clen = this.config.posxys.length;
		myChart.clear();

		var stage3Fin = clen;

		zr.configLayer(0, {
			motionBlur: true,
			lastFrameAlpha: 0.6,
		});
		var circles = this.graphic.circles;
		var boxs = this.graphic.boxs;

		for (var i = 0; i < clen; i++) {
			var circle = circles[i];
			var box = boxs[i];

			var x = this.config.posxys[i][0];

			circle.animate('', false)
				.delay(400)
				.when(1000, {
					position: [x + 40, -400]
				})
				.done(function() {
					stage3Fin--;

					if (stage3Fin > 0) {
						return;
					}

					zr.configLayer(0, {
						motionBlur: false,
					});

					for (var i = 0; i < clen; i++) {
						zr.remove(circles[i]);
						zr.remove(boxs[i]);
					}
					endScene();
				})
				.start('cubicIn');

			box.animate('style', false)
				.when(1000, {
					opacity: 0,
					fill: '#B4E6DC'
				}).start('cubicIn');
		}
	},

});
